<template>
  <div class="container-fluid no-padding h-100 bg-write">
    <div class="row d-flex h-100">
      <div class="col-xl-8 col-lg-6 col-md-5 no-padding bg-write d-flex align-items-center h100 bg">
        <div class="overlay"></div>
        <div class="authentication-col-content">
          <h1 class="gradient-text-01">Welcome To Login!</h1>
          <span class="description">享阅读后台管理系统</span>
        </div>
      </div>
      <div class="col-xl-4 col-lg-6 col-md-7 my-auto no-padding">
        <div class="authentication-form mx-auto">
          <div class="logo-centered mx-auto">
            <img src="~assets/img/logo.png" alt>
          </div>
          <h3>Sign In</h3>
          <el-form :model="form" :rules="rules" ref="form" :hide-required-asterisk="true">
            <el-form-item prop="loginName">
              <el-input
                v-model="form.loginName"
                placeholder="登录账号"
                clearable
                prefix-icon="el-icon-user-solid"
              ></el-input>
            </el-form-item>
            <el-form-item prop="loginPwd">
              <el-input
                v-model="form.loginPwd"
                placeholder="登录密码"
                show-password
                clearable
                prefix-icon="el-icon-lock"
              ></el-input>
            </el-form-item>
            <el-form-item class="text-center mt-10">
              <el-button type="primary" class="btn-lg" @click="onSubmit">立即登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { login } from "api/MemberApi";
import { mapMutations } from "vuex";

export default {
  name: "Login",
  data() {
    return {
      form: {
        loginName: "",
        loginPwd: ""
      },
      rules: {
        loginName: [
          { required: true, message: "请填写用户名" },
          { type: "email", message: "请输入正确格式的邮箱" }
        ],
        loginPwd: [{ required: true, message: "请填写密码" }]
      }
    };
  },
  methods: {
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          login(this.form).then(res => {
            if (res) {
              this.saveToken(res);
              this.saveLoginUrl(this.$route.path);
              this.$router.replace("/home");
            }
          });
        }
      });
    },
    ...mapMutations(["saveToken", "saveLoginUrl"])
  }
};
</script>
<style lang="stylus" scoped>
.bg-write {
  background: #FFF;
}

.bg {
  background: url('~assets/img/bg-01.jpg') no-repeat;
  background-size: cover;
}

.h100 {
  height: 100vh;
}

.overlay {
  background: linear-gradient(135deg, rgba(46, 52, 81, 0.4) 0%, rgba(52, 40, 104, 0.95) 100%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.authentication-col-content {
  margin-left: 40px;
  z-index: 999;

  h1 {
    margin-top: 30px;
    margin-bottom: 0;
    font-size: 3rem;
    font-weight: 700;
  }

  .description, h1 {
    color: #fff;
  }

  .description {
    margin-top: 15px;
    font-size: 22px;
    font-weight: 500;
    display: block;
    letter-spacing 2px
    text-indent 1px
  }
}

.authentication-form {
  width: 70%;
  display: block;

  .logo-centered {
    // width: 140px;
    margin: -100px auto 0 auto;
    text-align center

    img {
      width 250px
    }
  }

  & >>> .el-form-item__label {
    line-height: 20px;
  }

  h3 {
    color: #2c304d;
    font-size: 1.4rem;
    font-weight: 500;
    margin: 30px 0;
    text-align: left;
  }
}
</style>


